const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");

function resolve(dir) {
    return path.join(__dirname, dir)
}

const port = 9999; // dev port

const timeStamp = new Date().getTime();

let optimizationConfig = {};
if (process.env.NODE_ENV === 'development') {
    optimizationConfig = {
        minimize: true,
        minimizer: [new TerserPlugin()],
    }
}

module.exports = {
    //路径前缀
    publicPath: "/",
    assetsDir: './',
    lintOnSave: true,
    productionSourceMap: false,
    runtimeCompiler: true,
    chainWebpack: (config) => {
        //忽略的打包文件
        config.externals({
            'vue': 'Vue',
            'vue-router': 'VueRouter',
            'vuex': 'Vuex',
            'axios': 'axios',
            'element-ui': 'ELEMENT',
        });

        config.module
            .rule('scss')
            // .test(/\.css$/)
            .oneOf('vue')
            .resourceQuery(/\?vue/)
            .use('px2rem')
            .loader('px2rem-loader')
            .before('postcss-loader')
            .options({
                remUnit: 75
            })
    },
    configureWebpack: { // 重点
        // 输出重构 打包编译后的js文件名称,添加时间戳.
        output: {
            filename: `js/[name].${timeStamp}.js`,
            chunkFilename: `js/chunk.[id].${timeStamp}.js`,
        }
    },
    css: {
        extract: {
            ignoreOrder: true,
            filename: `css/[name].${timeStamp}.css`,
            chunkFilename: `css/chunk.[id].${timeStamp}.css`,
        },
        loaderOptions: {
            scss: {/* 自动引入全局scss文件 */
                prependData: `@import "./src/styles/global.scss";`
            },
            postcss: {
                plugins: [
                    require('postcss-plugin-px2rem')({
                        rootValue: 100, // 换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
                        // unitPrecision: 5, //允许REM单位增长到的十进制数字。
                        // propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
                        // propBlackList: [], //黑名单
                        exclude: false, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
                        // selectorBlackList: [], //要忽略并保留为px的选择器
                        // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
                        // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
                        mediaQuery: false, // （布尔值）允许在媒体查询中转换px。
                        minPixelValue: 0 // 设置要替换的最小像素值(3px会被转rem)。 默认 0
                    })
                ]
            }
        }
    },
    //开发模式反向代理配置，生产模式请使用Nginx部署并配置反向代理
    devServer: {
        port,
        proxy: {
            '/api': {
                target: process.env.VUE_APP_BASE_URL,
                ws: true,
                pathRewrite: {
                    '^/api': '/'
                },
                // selfHandleResponse: true, // 修改响应数据必须设为true
                onProxyReq: (proxyReq, req, res) => {
                    proxyReq.removeHeader('x-forwarded-host')  //移除请求头
                    // proxyReq.end();
                },
                // onProxyRes: function (proxyRes, req, res) {
                //     let responseData = Buffer.alloc(0);
                //     proxyRes.on('data', function (dataChunk) {
                //         responseData = Buffer.concat([responseData, dataChunk])
                //     })
                //     proxyRes.on('end', function () {
                //         // 修改响应结构
                //         res.send(responseData.toString('utf-8'))
                //     })
                // },
            },
            "/workflowBase": {
                target: process.env.VUE_WORKFLOW_BASE_URL,
                ws: true,
                pathRewrite: {
                    '^/workflowBase': '/'
                },
            },
            "/lowcodeBase": {
                target: process.env.VUE_LOWCODE_BASE_URL,
                ws: true,
                pathRewrite: {
                    '^/lowcodeBase': '/'
                },
            },
            "/formEditorBase": {
                target: process.env.VUE_FORM_EDITOR_BASE_URL,
                ws: true,
                pathRewrite: {
                    '^/formEditorBase': '/'
                },
            },
            "/oldWorkflowBase": {
                target: process.env.VUE_OLD_WORKFLOW_BASE_URL,
                ws: true,
                pathRewrite: {
                    '^/oldWorkflowBase': '/'
                },
            },
            "/minio":{
                target: "http://192.168.0.221:30969/cdn/",
                ws: true,
                pathRewrite: {
                    '^/minio': '/'
                },
            }
        },
        hot: true,
        disableHostCheck: true,
        overlay: {
            warnings: false,
            errors: true,
        },
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
    },
};
